﻿<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/css/login.css}" />
    <title>完美BI登陆</title>
        <style type="text/css">
        .bgCanvas {
    position: relative;
    background: url(../images/earth.jpg) center center no-repeat;
    height: 1000px;
    overflow: hidden;
}
.bgCanvas > canvas {
    position: absolute;
    width: 1920px;
    height: 100%;
    left: 50%;
    margin-left: -960px;
}
        </style>
    <style type="text/css">
        .login .login-top h1 {
            /*line-height: 160px;
            font-size: 30px;*/
        }
        .login{
        	height:200px;
        	background:none;
        	background-color:white;
        	border-radius: 5px;
        	border-bottom:3px solid rgb(204,212,215);
        	-webkit-box-shadow:5px 2px 6px rgb(10,69,119);
        	box-shadow:5px 2px 6px rgb(10,69,119);
        	
        }
        .login .login-top .sys-name-cn {
            padding-top: 40px;
            font-size: 40px;
            padding-left: 60px;
            font-weight: bold;
            color: white;
        }
        .login .login-top .sys-name {
            padding-left: 60px;
        }        
        .login-title{
	        width: 640px;margin: 0 auto;padding:0px 0px 20px 0px;
	        font-weight:bold;color:white;font-size:40px;
	        text-shadow:5px 2px 6px rgb(10,69,119);
	        font-family:Arial;
        }
        .chooseBrowser{
            position:absolute;
            top:0px;
            left:0px;
            color:white;
            font-weight:bold;
            text-shadow:5px 2px 6px #000;
        }
    </style>

</head>
<body>
    <div class="bgCanvas">
        <canvas id="starCanvas" width="1920" height="1000"></canvas>  
        
        
	    <div id="container">
	        <form action="/User/LoginMetabase" method="post" >
	            <div id="bd">
	            	<div class="login-title" >Perfect BI 登陆</div>
	                <div class="login">

	                    <div class="login-input">
	                        <p class="user ue-clear">
	                            <label>用户名</label>
	                            <input type="text" name="userid" />
	                        </p>
	                        <p class="password ue-clear">
	                            <label>密&nbsp;&nbsp;&nbsp;码</label>
	                            <input type="password" name="password" />                           
	                        </p>
	                        <input type="hidden" name="return_to" th:value="${Model}"/>
	                    </div>
	                    <p th:if="err!=null" style="color:red;text-align:center">
	                              [[${err}]]  
	                    </p>
	                    <div class="login-btn ue-clear">
	                        <input type="submit" class="btn" value="登录" style="border:none;cursor:pointer"/>
	
	                    </div>
	                </div>
	            </div>
	        </form>
	    </div>
    </div>
    <script  type="text/javascript">
        // 星星效果
        (function() {
        
            if (!window.addEventListener) return;
            
            var canvas = document.querySelector("#starCanvas");
            var context = canvas.getContext("2d");
        
            var stars = {},
                particleIndex = 0,
                settings = {
                    r: 1400,                // 根据是设计稿确定的轨迹半径
                    height: 260,            // 露出的圆弧的高度
                    density: 300,
                    maxLife: 100,
                    groundLevel: canvas.height,
                    leftWall: 0,
                    rightWall: canvas.width,
                    alpha: 0.0,
                    maxAlpha: 1
                };
        
            var getMinRandom = function() {
                var rand = Math.random();
                // step的大小决定了星星靠近地球的聚拢程度，
                // step = Math.ceil(2 / (1 - rand))就聚拢很明显
                var step = Math.ceil(1 / (1 - rand));
                var arr = [];
                for (var i=0; i<step; i++) {
                    arr.push(Math.random());
                }
        
                return Math.min.apply(null, arr);       
            };
        
            function resizeCanvas() {
                canvas.width = 1920;
                canvas.height = 800;
                settings.rightWall = canvas.width;
                settings.groundLevel = canvas.height;
                settings.height = 260 + (canvas.height - 800) / 2;
                redraw();
            }
        
            resizeCanvas();
        
            window.addEventListener('resize', resizeCanvas);
        
            function redraw() {
                context.clearRect(0, 0, canvas.width, canvas.height);
                context.fillStyle = "rgba(0,0,0,0)";
                context.fillRect(0, 0, canvas.width, canvas.height);
            }
        
            function Star() {
                // 圆的轨迹方程式为：(x-a)²+(y-b)²=r²
                // 因此，已知x, 则y = Math.sqrt(r² - (x-a)²) + b;
                // 其中，圆心是(a, b)
                // 在本例子中
                // 圆心坐标是(canvas.width/2, canvas.height - 600 + r);
                var a = canvas.width/2, b = canvas.height - settings.height + settings.r;
                // 因此，已知横坐标随机
                this.x = Math.floor(Math.random() * canvas.width);
                // 纵坐标需要在圆弧以上
                // 越往上，越稀疏
                this.offsety = getMinRandom() * (canvas.height - settings.height);
                this.y = b - Math.sqrt(settings.r * settings.r - (this.x - a) * (this.x - a)) - this.offsety;
        
                this.vx = Math.random() * 0.05 + 0.025;    // 水平偏移，也是移动速度
        
                // 星星的尺寸
                this.particleSize = 0.5 + (Math.random() + 0.1 / 4);
                particleIndex++;
                stars[particleIndex] = this;
                this.alpha = 0.0;
                this.maxAlpha = 0.2 + (this.y/canvas.height) * Math.random() * 0.8;
                this.alphaAction = 1;
            }
        
            Star.prototype.draw = function() {
                // 横坐标移动
                this.x += this.vx;
                // 根据切线方向进行偏移
                // y坐标
                this.y = canvas.height - settings.height + settings.r - Math.sqrt(settings.r * settings.r - (this.x - canvas.width/2) * (this.x - canvas.width/2)) - this.offsety;
        
                // 透明度慢慢起来
                if (this.alphaAction == 1) {
                    if (this.alpha < this.maxAlpha ) {
                        this.alpha += 0.005;
                    } else {
                        this.alphaAction = -1;
                    }
                } else {
                    if (this.alpha > 0.2 ) {
                        this.alpha -= 0.002;
                    } else {
                        this.alphaAction = 1;
                    }
                }
        
                if ( this.x + (this.particleSize*2) >= settings.rightWall ) {
                    // x到左侧
                    this.x = this.x - settings.rightWall;
                }
        
                // 绘制星星
                context.beginPath();
                context.fillStyle="rgba(255,255,255," + this.alpha.toString() + ")";
                context.arc(this.x, this.y, this.particleSize, 0, Math.PI*2, true); 
                context.closePath();
                context.fill();
            }
        
            function render() {
        
                redraw();
        
                // 星星的数目
                // IE下CUP性能有限，数目小
                var length = 400;
                if (!history.pushState) {
                    // IE9
                    length = 200;
                } else if (document.msHidden != undefined) {
                    // IE10+
                    length = 300;
                }
        
                if ( Object.keys(stars).length > length ) {
                    settings.density = 0;
                }
        
                for ( var i = 0; i < settings.density; i++ ) {
                    if ( Math.random() > 0.97 ) {
                        new Star();
                    }
                }
        
                // 星星实时移动
                for ( var i in stars ) {
                    stars[i].draw();
                }
        
                requestAnimationFrame(render);
            }
        
            if (!window.requestAnimationFrame) {
                window.requestAnimationFrame = function(fn) {
                    setTimeout(fn, 17);
                };
            }
        
            render();
        
            })();
        
        </script>
    <script type="text/javascript" th:src="@{/js/jq/jquery-1.8.0.min.js}" ></script>
    <script type="text/javascript">
    var height = $(window).height();
    $("#container").height(height);
    $("#bd").css("padding-top", height / 2 - $("#bd").height() / 2);

    $(window).resize(function () {
        var height = $(window).height();
        $("#bd").css("padding-top", $(window).height() / 2 - $("#bd").height() / 2);
        $("#container").height(height);

    });

    $('#remember').focus(function () {
        $(this).blur();
    });

    $('#remember').click(function (e) {
        checkRemember($(this));
    });

    function checkRemember($this) {
        if (!-[1, ]) {
            if ($this.prop("checked")) {
                $this.parent().addClass('checked');
            } else {
                $this.parent().removeClass('checked');
            }
        }
    }
    </script>
</body>
</html>
